<template>
    <div class="content">
        <template v-if="showModel == 1">
            <div 
                class="content-2"
            >
            
                <!-- 头像，简介 -->
                <div class="content-2-title">{{dataMsg[0]?.sz_ex3}}同志一路走好</div>
                <div class="content-2-img-box">
                    <img 
                        class="content-2-img" 
                        :src="imgList[0]" 
                    />
                </div>
                <div class="content-2-brief_introduction">{{dataMsg[0]?.of_ex3}}</div>
            </div>
        </template>
        
        <template v-if="showModel == 2">
            <div 
                class="content-2"
            >
                <!-- 照片 -->
                <div class="content-3-brief_introduction">生平照片</div>
                <div class="content-2-img-box">
                    <Transition>
                        <img 
                            :key="imgList[imgIndex]"
                            class="content-2-img" 
                            :src="imgList[imgIndex]" 
                        />
                    </Transition>
                </div>
            </div>
        </template>
        <template v-if="showModel == 3">
            <div 
                class="content-3"
            >
                <!-- 视频 -->
                <div class="content-3-title">生平视频</div>

                <div class="content-3-video">
                    <video 
                        ref="videoRef" 
                        width="100%" 
                        class="video-class"
                        :src="videoUrl"
                        autoplay
                        muted
                        loop
                        controls
                        @loadedmetadata="onLoadedmetadata"
                        @play="play"
                    >
                    </video>
                </div>
            </div>
        </template>
        <div class="page">
            <div 
                class="previous-page" 
                :style="{backgroundImage: (showModel != 1) ? `url(${leftImg})` : '', backgroundSize: '100% 100%'}"
                @click="previousPage"
            ></div>
            <div 
                class="next-page" 
                :style="{backgroundImage: (showModel != 3) ? `url(${rightImg})` : '', backgroundSize: '100% 100%'}"
                @click="nextPage"
            ></div>
        </div>
        <Danmu :messages="messageGift" :messageDuration="15" />
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick  } from 'vue'
    import type { Ref, Raw } from 'vue'
    import {  } from '@/apis'
    import Danmu from "@/components/DanMu.vue"; 
    import { useRoute, useRouter } from 'vue-router'
    import { useStore } from '@/store'
    import { wst } from '@/websocket'
    const store: any = useStore()
    const route: any = useRoute()

    const dataMsg: Ref<any[]> = ref([])
    const messageGift: Ref<any[]> = ref([])
    const imgList: Ref<any> = ref([
        // new URL('@/assets/avatar/avatar.png', import.meta.url).href,
        // new URL('@/assets/avatar/bg4.png', import.meta.url).href,
    ])
    const imgIndex: Ref<number> = ref(0)
    
    // const videoUrl: Ref<any> = ref('http://vjs.zencdn.net/v/oceans.mp4')
    const videoUrl: Ref<any> = ref('')
    // 告别厅1122
    wst(route.query.hallName, '', (res) => {
        res = JSON.parse(res)
        console.log(res)
        if (res.type == '状态变更') {
            messageGift.value = []
            dataMsg.value = res.data
            imgList.value =  dataMsg.value[0]?.ngm_ex9?.split(',')
            videoUrl.value = dataMsg.value[0]?.of_ex4
        } else if (res.type == '留言') {
            messageGift.value.push({
                text: res.data.name + res.type + '：' + res.data.content
            })
        }
    })
    
    // const img = ref(new URL('@/assets/logo.png', import.meta.url).href)
    const leftImg = ref(new URL('@/assets/img/left.png', import.meta.url).href)
    const rightImg = ref(new URL('@/assets/img/right.png', import.meta.url).href)
    const showModel: Ref<number> = ref(1)

    

    
    const videoRef: Ref<any> = ref(null)
    const onLoadedmetadata = () => {
        // videoRef.value.play()
        // nextTick(() => {
        //     videoRef.value.muted = false
        //     videoRef.value.play()
        // })
    }
    const play = () => {
        // videoRef.value.muted = false
        // videoRef.value.play()
    }
    
    onMounted(() => {
        
    })
    
    const interval: Ref<any> = ref('')
    const addInterval = () => {
        if (interval.value) {
            clearInterval(interval.value)
        }
        imgIndex.value = 0
        interval.value = setInterval(() => {
            if (imgList.value.length > (imgIndex.value + 1)) {
                imgIndex.value++
            } else {
                imgIndex.value = 0
            }
        }, 5000)
    }
    const nextPage = () => {
        if (showModel.value < 3) {
            showModel.value++
        }
        if (showModel.value == 2) {
            addInterval()
        }
    }
    const previousPage = () => {
        if (showModel.value > 1) {
            showModel.value--
        }
        if (showModel.value == 2) {
            addInterval()
        }
    }
    onBeforeUnmount(() => {
        if (interval.value) {
            clearInterval(interval.value)
        }
    })
</script>

<style lang="scss" scoped>
    .v-enter-active {
        transition: opacity 1s ease;
    }

    .v-enter-from,
    .v-leave-to {
    opacity: 0;
    }
    .content::after {
        content: '';
        position: absolute;
        z-index: -1;
        width: 100vw;
        height: 100vh;
        background-image: url('@/assets/avatar/bg8.png');
        background-size: 100% 100%;
        filter: blur(5px);
    }
    .content {
        width: 100vw;
        height: 100vh;
        // background-image: url('@/assets/avatar/bg7.png');
        // background-size: 100% 100%;
        overflow: hidden;
        display: flex;
        color: #fff;

        box-sizing: border-box;
        .content-2 {
            flex: 1;
            box-sizing: border-box;
            padding: 0 33%;
        }
        .content-3 {
            flex: 1;
            box-sizing: border-box;
            padding: 0 1%;
            .content-3-video {
                box-sizing: border-box;
                padding-top: 5%;
                // outline: none;
                width: 100%;
                height: 40vw;
                border-radius: 10%;
                .video-class {
                    box-sizing: border-box;
                    padding: 0 10%;
                    height: 100%;
                    border: none;
                }
            }
            .content-3-title {
                margin-top: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                box-sizing: border-box;
                // padding-top: 40px;
                font-size: 25px;
                text-align: center;
                width: 100%;
                height: 4vw;
                background-image: url('@/assets/img/backgroundFrame.png');
                background-size: 13.8% 100%;
                background-repeat: no-repeat;
                background-position: 50% 0;
            }
        }
        .content-2 {
            .content-2-title {
                display: flex;
                justify-content: center;
                align-items: center;
                box-sizing: border-box;
                // padding-top: 40px;
                font-size: 40px;
                text-align: center;
                width: 100%;
                height: 5vw;
                background-image: url('@/assets/img/backgroundFrame.png');
                background-size: 80% 100%;
                background-repeat: no-repeat;
                background-position: 50% 0;
            }
            .content-2-img-box {
                box-sizing: border-box;
                padding-top: 5%;
                width: 100%;
                height: 35vw;
                border-radius: 10%;
            }
            .content-2-img {
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                padding: 0 10%;
                object-fit: cover;
            }
            .content-2-brief_introduction {
                box-sizing: border-box;
                margin-top: 40px;
                padding: 10px;
                border-radius: 2%;
                font-size: 25px;
                text-indent: 50px;
                text-align: left;

                background-color: rgba(0,0,0,0.5);
            }
        }
        .content-3-brief_introduction {
            margin-top: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            // padding-top: 40px;
            font-size: 25px;
            text-align: center;
            width: 100%;
            height: 4vw;
            background-image: url('@/assets/img/backgroundFrame.png');
            background-size: 40% 100%;
            background-repeat: no-repeat;
            background-position: 50% 0;
        }
        
    } 
    .page {
        position: absolute;
        top: 0vw;
        left: 0;
        width: 100vw;
        height: 10vw;
        display: flex;
        justify-content: space-between;
        // align-items: center;
    }
    .previous-page {
        width: 100px;
        height: 50px;
        // background-image: url('@/assets/img/left.png');
        // background-size: 100% 100%;
    }
    .next-page {
        width: 100px;
        height: 50px;
        // background-image: url('@/assets/img/right.png');
        // background-size: 100% 100%;
    }
   
</style>